<style>
.question-div {
	padding: 20px;
	background-color: #fff;
	margin-top: 20px;
	border-radius: 5px;
}
.question-btns {
	text-align: right;
}
.question-btns > Button {
	margin-left: 20px;
}
.btn-div {
    text-align: center;
    padding-top: 20px;
}
</style>
<template>
  	<div class="question">
    	<div class="content-div">
			<Row style="margin-top:10px">
				<Col span="14" class="table-form-input-select-col">
					<span class="alltitle" style="line-height:30px"><router-link to="项目列表"> 项目列表</router-link> > 预备员工专区 > <router-link to="train">培训</router-link></span>
				</Col>				
			</Row>
		</div>
        <div class="content-div" style="margin-top:20px">
            <Tabs type="card" @on-click="tabChange">
                <TabPane label="培训管理" name="content">
                    <Row style="margin-top:10px">        
                        <Col span="2">
                            <Button type="info" @click="addContent">增加图片</Button>
                        </Col>      
                        <Col span="2">
                            <Button type="info" @click="addVideo">增加视频</Button>
                        </Col>      
                    </Row>
                    <div class="question-div" v-for="(question, index) in data">
                        <!-- <singleselect v-bind.sync="question"/> -->
                        <component v-bind:is="componentType(train.type)" v-bind.sync="question"/>
                        <div class="question-btns">
                            <Button type="info" @click="moveUp(index)" :disabled="index == 0">上移</Button>
                            <Button type="info" @click="moveDown(index)" :disabled="index == data.length -1">下移</Button>
                            <Button type="text" @click="delQuestion(index)">删除</Button>
                        </div>
                    </div>
                    <div class="btn-div">
                        <Button type="primary" @click="saveQuestion">保存内容</Button>
                    </div>
                </TabPane>
                <TabPane label="数据管理" name="data">
                    <div style="margin-top: 10px">
                        <Table border stripe :columns="columns" :data="list" ref="table" style="overflow: visible"></Table>
                    </div>
                </TabPane>
            </Tabs>
        </div>
  	</div>
</template>
<script>
import singleselect from '../../components/singleselectanswer.vue';
import imageupload from '../../components/imageupload.vue';
export default {
	components: {
        singleselect,
        imageupload
    },
    data() {
        return {
        	qid: 0,
            train: null,
            typeList: [
                {
                    type: 1,
                    value: 'imageupload',
                    label: '内容'
                },
                {
                    type: 2,
                    value: 'singleselect',
                    label: '单选题'
                }
            ],
            columns: [
            {
                title: "序号",
                key: "id",
                width: 99,
            }, 
            {
                title: "姓名",
                key: "name",

            }, {
                title: "分数",
                key: "usertotalintegral",

            }],
            data: [],
            list: []
        }
    },
    created(){
          //获取传入的参数
          var params = this.$route.params;
          this.qid = params.qid;
          this.train = JSON.parse(params.train)
          this.data = JSON.parse(this.train.qus)

          var self = this
          var poid = localStorage.pid;
          $.ajax({
            url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/User_Train/index",
            data: {
                "project_id": poid,
                "train_id": this.qid
            },
            type: "POST",
            dataType: "json",
            success: function(data) {
                console.log(data);

                if (data.code == 1) {
                    self.list = data.data 
                }
                else {
                    self.$Message.error('操作失败!')   
                }
            }
        });
    },
    methods: {
        tabChange(name) {
            console.log(name)
            
        },
    	componentType(id) {
    		var type = 'question'
    		this.typeList.forEach(function(item, index){
    			if (item.type == id) {
    				type = item.value
    			}
    		})
	    	return type
	    },
        addContent(e) {
            if (this.train.type == 1) {
                this.data.push({type: 'image', url: ''})
            }
            else {                
                this.data.push({title: '', selection: '', answer: ''})
            }
        },
        addVideo(e) {
            if (this.train.type == 1) {
                this.data.push({type: 'video', poster: '', url: ''})
            }
            else {                
                this.data.push({title: '', selection: '', answer: ''})
            }
        },
    	saveQuestion(e) {
    		var poid = localStorage.pid;
    		var data = JSON.stringify(this.data)
    		var self = this
            $.ajax({
                url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/Train/updateTrain",
                data: {
                    "project_id": poid,
                    "id": self.train.id,
                    "qus": data,
                    "type": self.train.type,
                    "title": self.train.title,
                    "memo": self.train.memo,
                    "integral": self.train.integral,
                    "pic1": self.train.pic1,
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log(data);

                    if (data.code == 1) {
                        console.log(data);
                        self.$Message.success('操作成功!')                   
                    }
                    else {
                        self.$Message.error('操作失败!')   
                    }
                }
            });
    	},
    	delQuestion(index) {
    		let len = this.data.length
    		if (index < len) {
    			let q = this.data.splice(index, 1)

                var self = this
                $.ajax({
                    url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_listdel&id=" + q[0].id,
                    dataType: "json",
                    success: function(data) {
                        console.log(data);

                        if (data.code == 1) {
                            console.log(data);
                            self.$Message.success('删除成功!')                        
                        }
                    }
                });
    		}
    	},
    	moveUp(index) {
    		if (index > 0) {
    			let q = this.data.splice(index, 1)
                this.data.splice(index-1, 0, q[0])
                console.log(index, this.data)
    		}
    	},
    	moveDown(index) {
    		if (index < this.data.length - 1) {
    			let q = this.data.splice(index, 1)
    			this.data.splice(index+1, 0, q[0])
    		}
    	}
    }
};
</script>
